import React, { useEffect } from "react";
import { message } from "@ct0/ui";

export default function MessagePanel() {
  return (
    <div>
      <h2>Message 全局提示</h2>
      <ul>
        <li>全局展示操作反馈信息</li>
        <li>可提供成功、警告、错误、失败类型的反馈信息</li>
        <li>顶部居中显示并自动消息，是一种不打断用户操作的轻量级提示方式</li>
      </ul>
      <h2>代码演示</h2>
      <div>
        <ul>
          <li key="basic">基础调用</li>
        </ul>
        <button onClick={() => message.info("提示")}>提示</button>
        <button onClick={() => message.success("成功")}>成功</button>
        <button onClick={() => message.error("失败")}>失败</button>
        <button onClick={() => message.warning("警告")}>警告</button>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { message } from '@ct0/ui'`}
              {"\n"}
              const info = () =&gt; message.info("提示信息"){"\n"}
              ReactDOM.render(
              {`<button onClick={info}>trigger</button>`}, mountNode );
            </code>
          </pre>
        </div>
      </div>
      <div>
        <ul>
          <li key="promise">
            Promise接口: 可以通过 then 接口在关闭后运行 callback
          </li>
        </ul>
        <button
          onClick={() => {
            message.success("稍等...", 2).then(() => {
              message.info("callback消息");
            });
          }}
        >
          promise
        </button>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { message } from '@ct0/ui'`}
              {`const onClick = () => {message.success('稍等...', 2).then(() =>  { message.info("callback消息")})}`}
              {"\n"}
              ReactDOM.render(
              {`<button onClick={onClick}>trigger</button>`}, mountNode );
            </code>
          </pre>
        </div>
      </div>
      <h2>API</h2>
      <ul>
        <li>message.success(text, duration)</li>
        <li>message.info(text, duration)</li>
        <li>message.error(text, duration)</li>
        <li>message.warning(text, duration)</li>
        <li>message.destroy(): 全局销毁</li>
      </ul>
      <table border="1">
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>text</td>
            <td>提示内容</td>
            <td>string | ReactNode</td>
            <td>-</td>
          </tr>
          <tr>
            <td>duration</td>
            <td>自动关闭的延迟，单位秒，设为0时不自动关闭</td>
            <td>number</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
